<template>
  <div class="case-wrapper">
    <div class="case-box">
      <div class="case-left">
        <div class="tag-box">
          <div class="tag" v-if="$route.query.type === 'anchor'"><img src="../../assets/anchor-icon.png" alt="">{{$route.query.keywords}}</div>
          <div class="tag" v-if="$route.query.type === 'tag'"><img src="../../assets/keywords-icon.png" alt="">{{$route.query.keywords}}</div>
        </div>
        <div class="case_left-title" v-if="$route.query.keywords">物联网智库有关“{{$route.query.keywords}}”的原创文章，为您动态扫描新能源行业最新动态。</div>
        <!-- 专家库下的新闻2 -->
        <NewsItem v-for="(item, index) of list.slice(0, 3)" :key="'news2'+ index" :data="item" />
        <!-- 超级进化者banner -->
        <div class="shanghai-banner" v-if="alAdverBanner" :style="{backgroundImage: 'url(' + alAdverBanner + ')'}"></div>
        <!-- 专家库下的新闻3 -->
        <NewsItem v-for="(item, index) of list.slice(3)" :key="'news3'+ index" :data="item" />
        <!-- 更多内容 -->
        <div class="more-btn" v-if="list.length < maxPage" @click="loadMore">加载更多内容…</div>
        <div class="nodata" v-if="list.length === maxPage">到底了...</div>
      </div>
      <div class="case-right">
        <!-- 热门标签 -->
        <HotTags style="padding-top: 40px;"/>
        <!-- 微信扫一扫 -->
        <div class="advertising-box"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 热门文章
import HotTags from '@/views/home/components/HotTags';
// 文章
import NewsItem from '@/views/home/components/NewsItem';
import { advertsList, articlesList } from '@/api/api';

export default {
  components: {
    HotTags,
    NewsItem
  },
  data() {
    return {
      list: [],
      alAdverBanner: '',
      start: 0,
      maxPage: 0
    }
  },
  mounted() {
    this.getALList();
    this.getALAdverBanner();
  },
  methods: {
    // 获取资讯中广告 banner
    async getALAdverBanner() {
      const params = {
        pageType: 'AL_PAGE',
        type: 'FEED',
        status: 1
      };
      const res = await advertsList(params);
      // 随机获取一个banner
      if (res.list.length) {
        const randomIndex = Math.floor(Math.random() * res.list.length);
        this.alAdverBanner = res.list[randomIndex].coverUrl;
      }
      console.log(123)
    },
    // 获取资讯
    async getALList() {
      const params = {
        type: 'ZX',
        status: 1,
        limit: 20,
        start: this.list.length
      };
      if (this.$route.query.type === 'anchor') {
        params.author = this.$route.query.keywords;
      }
      
      if (this.$route.query.type === 'tag') {
        params.tagId = this.$route.query.tagId;
      }
      const res = await articlesList(params);
      this.maxPage = res.count;
      this.list = this.list.concat(res.list);
    },
  }
}
</script>

<style lang="scss" scoped>
.case-wrapper {
  background: #F1F1F1;
  .case-box {
    width: 1180px;
    margin: 0 auto;
    overflow: hidden;
    .case-left {
      width: 760px;
      float: left;
      margin-bottom: 52px;
      .tag-box {
        padding-top: 40px;
        .tag {
          padding: 8px 12px;
          height: 24px;
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #4C4C4C;
          line-height: 24px;
          background: rgba(255, 145, 149, 0.1);
          border-radius: 4px;
          border: 1px solid #FF9195;
          display: inline-block;
          color: #FF9195;
          img {
            width: 14px;
            height: 14px;
            margin-right: 5px;
          }
        }
      }
      .case_left-title {
        padding-top: 12px;
        font-size: 14px;
        
        font-weight: 400;
        color: #4C4C4C;
        line-height: 22px;
        margin-bottom: 32px;
      }
      .shanghai-banner {
        width: 760px;
        height: 140px;
        background-repeat: no-repeat;
        background-size: cover;
        margin-bottom: 24px;
      }
      .more-btn {
        width: 200px;
        height: 48px;
        line-height: 48px;
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #D8D8D8;
        margin: 50px auto 72px;
        text-align: center;
        font-size: 16px;
        
        font-weight: 400;
        color: #4C4C4C;
        cursor: pointer;
        &:hover, &:active {
          opacity: 0.8;
        }
      }
      .nodata {
        width: 100%;
        text-align: center;
        margin: 60px 0 40px;
        color: #C0C4CC;
      }
    }
    .case-right {
      width: 380px;
      height: 500px;
      float: right;
      .advertising-box {
        width: 100%;
        height: 112px;
        background: url('../../assets/ercode-banner.png') no-repeat;
        background-size: cover;
        margin-bottom: 52px;
        border-radius: 4px;
      }
    }
  }
}

</style>